
/**
 * Created by xt on 2017/3/29.
 */
import React, { Component } from 'react'
import {getCode} from './data'
import Modal from '../../components/modal'


import "./index.scss"
import src from "../../assets/img/logo-img.png";
class GetCode extends Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props)
    this.state = {
      tel: '',
      code: undefined,
      school: undefined,
      clss: undefined,
      name: undefined,
      showModal: false,
      content: '手机号不能为空!'
    }
    this.getCode = this.getCode.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }
  inputVal (e) {
    this.setState({
      tel: e.target.value
    });
  }
  schoolVal (e) {
    this.setState({
      school: e.target.value
    });
  }
  clssVal (e) {
    this.setState({
      clss: e.target.value
    });
  }
  nameVal (e) {
    this.setState({
      name: e.target.value
    });
  }
  closeModal () {
    return () => {
      this.setState({
        showModal: false
      });
    }
  }
  getCode () {
    let mobile = this.state.tel.toString(),
        school = this.state.school,
        clss = this.state.clss,
        name = this.state.name;
    let telReg = !!mobile.match(/^(13[0-9]|15[^4,\\D]|17[678]|18[^4,\\D]|14[57])[0-9]{8}$/);
    if (!mobile) {
      this.setState({
        showModal: true
      });
      return
    }
    if (!school) {
      this.setState({
        showModal: true,
        content: '请输入学校名称!'
      });
      return
    }
    if (!clss) {
      this.setState({
        showModal: true,
        content: '请输入班级名称!'
      });
      return
    }
    if (!name) {
      this.setState({
        showModal: true,
        content: '请输入您的名字!'
      });
      return
    }
    if (mobile && !telReg) {
      this.setState({
        showModal: true,
        content: '请输入正确的手机号格式!'
      });
    }
    if  (mobile && telReg) {
      getCode(this.state.tel,this.state.school,this.state.clss,this.state.name).then((res) => {
        if (res.code == '200') {
          this.context.router.push('success');
        } else {
          this.setState({
            showModal: true,
            content: res.msg
          });
        }
      })
    }

  }
  render () {
    return (
      <div >
        <div className="ab-top-box" style={{paddingBottom: '.64rem'}}>
          <h4 style={{paddingTop: '.22rem',marginBottom: '.36rem'}}><img style={{width: '1.4rem'}} src={src}/></h4>
          <p className="intro-code">
            领取[志愿百科]体验卡
          </p>
        </div>
        <div className="code-form-box">
          <div className="index-top-form">
            <div className="float index-top-input" style={{paddingRight:"0"}}>
              <i className="code-icon icon-tel left"></i>
              <input type="text" style={{marginLeft: '.32rem'}} onChange={(e) => {this.inputVal(e)}} placeholder="请输入你的手机号" />
            </div>
          </div>
          <div className="index-top-form">
            <div className="float index-top-input" style={{paddingRight:"0"}}>
              <i className="code-icon icon-school left"></i>
              <input type="text" style={{marginLeft: '.32rem'}} onChange={(e) => {this.schoolVal(e)}} placeholder="请输入你的学校名称" />
            </div>
          </div>
          <div className="index-top-form">
            <div className="float index-top-input" style={{paddingRight:"0"}}>
              <i className="code-icon icon-clss left"></i>
              <input type="text" style={{marginLeft: '.32rem'}} onChange={(e) => {this.clssVal(e)}} placeholder="请输入你的班级" />
            </div>
          </div>
          <div className="index-top-form">
            <div className="float index-top-input" style={{paddingRight:"0"}}>
              <i className="code-icon icon-person left"></i>
              <input type="text" style={{marginLeft: '.32rem'}} onChange={(e) => {this.nameVal(e)}} placeholder="请输入你的名字" />
            </div>
          </div>
          <button className="link-btn" style={{marginTop: '.54rem'}}   onClick={this.getCode}>免费领取体验卡</button>
        </div>
        {this.state.showModal && <Modal close={this.closeModal} content={this.state.content}/>}
      </div>
    )
  }

}
export default GetCode

/*
*
*  发送短信验证码
*
*
* */
//<div className="index-top-form float">
//  <div className="float left index-top-input" style={{paddingRight:"0",width: '55%'}}>
//<i className="code-icon icon-point left"></i>
//  <input type="text" style={{marginLeft: '.32rem'}} placeholder="请输验证码" />
//  </div>
//  <span className="code-get">获取验证码</span>
//  </div>
